<!-- 安装换新 - 退款 -->
<template>
	<view :class="['main', dataSource.xiaowoPhone ? 'main_p' : '', isFinish || dataSource.status === 4 ? 'main_hide_footer_button' : '']">
		<CustomNavBar title="订单详情" />

		<u-loading-page :loading="state.loading" font-size="15"></u-loading-page>

		<view class="qrcode flex_center" v-if="isFinish">
			<view class="img">
				<image src="https://static-test.jinzhuangli.com/upload/20250722/1947565980580134912.png" mode=""></image>
				<view class="view_icon flex_center">
					<image src="" mode=""></image>
				</view>
			</view>
			<view class="">请业主使用微信扫码验收/支付</view>
		</view>

		<!-- 头部 -->
		<view class="header u-flex-between u-flex-y-center" v-else>
			<view class="u-flex-between u-flex-y-center">
				<view class="steps flex_center">
					<view class="steps_icon"></view>
					<view class="steps_line"></view>
					<view class="steps_icon"></view>
				</view>
				<view class="times">
					<view class="end_time flex">
						<view class="label">完工时间</view>
						<view class="">2025-07-30 12:00</view>
					</view>
					<view class="flex">
						<view class="label flex">开工时间</view>
						<view class="">2025-07-30 12:00</view>
					</view>
				</view>
			</view>
			<view class="status flex_center" :style="{ color: dataSource.statusMap.color, backgroundColor: dataSource.statusMap.bgColor }">{{ dataSource.statusMap.label }}</view>
		</view>
		<!-- 头部 -->

		<!-- 服务信息 v-if="dataSource.finishPic"-->
		<view class="card card_b" v-if="isFinish">
			<view class="card_title">服务信息</view>
			<view class="form_row u-flex-y-center u-flex-between">
				<view class="row_label">完工图片</view>
				<scroll-view scroll-x class="row_value">
					<image class="row_value_img" v-for="(item, idx) in dataSource.finishPicImgs" :key="idx" @tap.stop="viewImgs('finishPicImgs', idx)" :src="item" mode="aspectFill"></image>
				</scroll-view>
			</view>
			<view class="form_row u-flex-y-center u-flex-between" v-if="dataSource.finishRemark">
				<view class="row_label">备注</view>
				<view class="row_value">
					{{ dataSource.finishRemark || "-" }}
				</view>
			</view>
		</view>
		<!-- 服务信息 -->

		<!-- 工地信息 -->
		<view class="card card_b">
			<view class="card_title">工地信息</view>
			<view class="form_row u-flex-y-center u-flex-between">
				<view class="row_label">业主姓名</view>
				<view class="row_value">{{ dataSource.customerName || "-" }}</view>
			</view>
			<view class="form_row u-flex-y-center u-flex-between">
				<view class="row_label">联系方式</view>
				<view class="row_value u-flex-y-center" style="justify-content: flex-end" @tap.stop="callPhone(dataSource.customerPhone)">
					<view class="">{{ dataSource.customerPhone || "-" }}</view>
					<image class="row_icon" :src="getFileUrl('0x72412301')" mode=""></image>
				</view>
			</view>
			<view class="form_row u-flex-y-center u-flex-between">
				<view class="row_label">工地地址</view>
				<view class="row_value u-line-2">
					{{ dataSource.geoAddress || "" }}
				</view>
			</view>
			<view class="form_row u-flex-y-center u-flex-between">
				<view class="row_label">订单编号</view>
				<view class="row_value order_row_value u-flex-y-center" @tap.stop="copyText(dataSource.no)">
					<view class="">{{ dataSource.no || "-" }}</view>
					<template v-if="dataSource.no">
						<view class=""></view>
						<view class="">复制</view>
					</template>
				</view>
			</view>
		</view>
		<!-- 工地信息 -->

		<!-- 故障信息 -->
		<view class="card card_b">
			<view class="card_title">需求信息</view>
			<view class="form_row u-flex-y-center u-flex-between">
				<view class="row_label">故障描述</view>
				<view class="row_value">
					{{ dataSource.description || "-" }}
				</view>
			</view>
			<view class="form_row u-flex u-flex-y-center u-flex-between">
				<view class="row_label" style="white-space: nowrap">故障图片/视频</view>
				<scroll-view scroll-x class="row_value">
					<image class="row_value_img" @tap.stop="viewImgs('picImgs', idx)" v-for="(item, idx) in dataSource.picImgs" :key="idx" :src="item" mode="aspectFill"></image>
					<view class="row_value_img" @tap.stop="viewVideo('picVideos', idx)" v-for="(item, idx) in dataSource.picVideos" :key="idx">
						<video :controls="false" :show-center-play-btn="false" :src="item"></video>
						<image class="play_icon" :src="getFileUrl('0x72411014')" mode=""></image>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 故障信息 -->

		<!-- 工单信息 -->
		<view class="card card_b">
			<view class="card_title">工单信息</view>
			<view class="form_row u-flex-y-center u-flex-between">
				<view class="row_label">空间位置</view>
				<view class="row_value">{{ dataSource.space || "-" }}</view>
			</view>
			<view class="form_row u-flex-y-center u-flex-between">
				<view class="row_label">工程名称</view>
				<view class="row_value u-line-2">
					{{ dataSource.name || "" }}
				</view>
			</view>
			<view class="form_row u-flex-y-center u-flex-between">
				<view class="row_label">工种</view>
				<view class="row_value u-line-2">
					{{ dataSource.jobCategory_dictText || "" }}
				</view>
			</view>
			<view class="form_row u-flex-y-center u-flex-between">
				<view class="row_label">工地编号</view>
				<view class="row_value order_row_value u-flex-y-center" @tap.stop="copyText(dataSource.siteNo)">
					<view class="">{{ dataSource.siteNo || "-" }}</view>
					<template v-if="dataSource.siteNo">
						<view class=""></view>
						<view class="">复制</view>
					</template>
				</view>
			</view>
		</view>
		<!-- 工单信息 -->

		<!-- 人工/辅材/备注 -->
		<view class="card" style="padding: 0">
			<view class="tabs">
				<u-tabs
					ref="tabsRef"
					:current="state.tabIdx"
					:list="state.tabs"
					keyName="label"
					:activeStyle="{ color: '#333', fontWeight: 700 }"
					:inactiveStyle="{ color: '#848D99', fontWeight: 400, 'font-size': '30rpx' }"
					:lineWidth="15"
					:scrollable="false"
					@change="changeTabs"
					lineColor="#486CF6"
				></u-tabs>
			</view>
			<view class="card_content">
				<TableCom v-if="tabVal === 0" :columns="workerColumns" :dataList="state.workerList" />
				<TableCom v-if="tabVal === 1" :columns="materialsColumns" :dataList="state.materialsList" />
				<TableCom v-if="tabVal === 2" :columns="materialsColumns" :dataList="state.materialsList" />
				<!-- 备注 图文 -->
				<view class="order_desc" v-show="tabVal === 3">工单内容文本字段工单内容文本字段工单内容文本字段工单内容文本字段工单内容文本字段工单内容文本字段</view>
			</view>
		</view>
		<!-- 人工/辅材/备注 -->

		<!-- 底部 -->
		<view :class="['footer']">
			<view v-if="dataSource.xiaowoPhone" :class="['card padding_r padding_l u-flex-y-center u-flex-between ']">
				<view class="sf_l flex">
					<image class="tl_avatar" :src="getFileUrl('0x72412251')" mode="aspectFill"></image>
					<view class="tl_info">
						<view class="tl_info_tit">{{ dataSource.xiaowoPhone_dictText || "" }}</view>
					</view>
				</view>
				<view class="sfr_item flex">
					<image :src="getFileUrl('0x72412218')" mode=""></image>
					<view>联系优化师</view>
				</view>
			</view>
			<!-- 完成/取消/不显示 -->
			<view class="flex" style="padding: 0 38rpx" v-if="'1,2'.includes(dataSource.status)">
				<block v-if="dataSource.status === 1">
					<view class="verify">
						<SliderVerify ref="verifyRef" @change="changeVerify" />
					</view>
				</block>
				<view class="btns flex_bw" v-if="dataSource.status === 2">
					<view class="btn receive_payment flex_center">收款</view>
					<view class="btn submit flex_center">上报完工信息</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
	</view>
</template>

<script setup lang="ts">
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
import { computed, reactive, ref } from "vue";
import { getStatus } from "@/pages/workerOrder/status";
import { copyText, getFileUrl } from "@/utils/common";
import SliderVerify from "./components/SliderVerify.vue";
import TableCom from "./components/Table.vue";

const status = 3;
const dataSource = {
	status, //1待服务 2服务中 3服务完成 4取消
	statusMap: getStatus(status),
	description: "故障描述故障描述故障描述故障描述故障描述故障描述故障描述故障描述故障描述故障描述故障描述故障描述故障描述故障描述故障描述故障描述故障描述",
	picImgs: [
		"https://static-test.jinzhuangli.com/upload/20250604/1930107890258296832.png",
		"https://static-test.jinzhuangli.com/upload/20250604/1930107890258296832.png",
		"https://static-test.jinzhuangli.com/upload/20250604/1930107890258296832.png"
	],
	picVideos: [],
	customerName: "业主1",
	customerPhone: "13333333333",
	geoAddress: "山西省阳泉市郊区222",
	no: "GD20250001",
	space: "空间1",
	name: "工程名称工程名称",
	jobCategory_dictText: "工种",
	siteNo: "GD20250001",
	xiaowoPhone: "13333333333",
	xiaowoPhone_dictText: "小蜗",
	arriveTime: "",
	finishRemark: "完工备注11完工备注11完工备注11",
	finishPicImgs: ["https://static-test.jinzhuangli.com/upload/20250604/1930107890258296832.png", "https://static-test.jinzhuangli.com/upload/20250604/1930107890258296832.png"]
};

// 人工表格
const workerColumns = [
	{
		width: 258,
		title: "人工名称",
		key: "name"
	},
	{
		width: 85,
		title: "工时",
		key: "nationalDailyWage"
	}
];

const materialsColumns = [
	{
		width: 176,
		title: "辅材名称",
		key: "name"
	},
	{
		width: 88,
		title: "图片",
		type: 1,
		key: "productPicture"
	},
	{
		width: 176,
		title: "规格",
		key: "specification"
	},
	{
		width: 88,
		title: "SKU编码",
		key: "skuCode"
	},
	{
		width: 73,
		title: "品牌",
		key: "brandName"
	}
];

const verifyRef = ref(null);
const state = reactive({
	loading: false,
	tabIdx: 0,

	// 人工列表
	workerList: [
		{
			id: "1",
			name: "人工1",
			nationalDailyWage: 3
		},
		{
			id: "2",
			name: "人工2",
			nationalDailyWage: 3
		},
		{
			id: "3",
			name: "人工3",
			nationalDailyWage: 3
		}
	],
	// 辅材列表
	materialsList: [
		{
			id: "1",
			name: "辅材辅材辅材辅材辅材辅材辅材辅材辅材辅材辅材辅材辅材辅材辅材辅材辅材辅材辅材辅材辅材辅材辅材",
			productPicture: "upload/20250722/1947467658246832128.jpg",
			specification: "辅材",
			skuCode: "skucode",
			brandName: "品牌11"
		},
		{
			id: "2",
			name: "辅材",
			productPicture: "upload/20250722/1947467658246832128.jpg",
			specification: "辅材",
			skuCode: "skucode",
			brandName: "品牌11"
		}
	],
	// 工具列表
	toolsList: [],
	tabs: [
		{
			label: "人工",
			value: 0
		},
		{
			label: "辅材",
			value: 1
		},
		{
			label: "工具",
			value: 2
		},
		{
			label: "备注",
			value: 3
		}
	]
});

// 是否完成
const isFinish = computed(() => {
	return dataSource.status === 3;
});

const tabVal = computed(() => {
	return state.tabs[state.tabIdx].value;
});

const changeTabs = (e: { [key: string]: any }) => {
	console.log("e", e);
	state.tabIdx = e.index;
};

const viewImgs = (name: string, current = 0) => {
	const urls = dataSource[name];
	uni.previewImage({
		urls,
		current
	});
};

const viewVideo = (name: string, idx: number) => {
	const url = dataSource[name][idx];
	uni.navigateTo({
		url: "/myPagesA/pages/video/index?src=" + encodeURIComponent(url)
	});
};

// 联系客户
const callPhone = (phoneNumber: string) => {
	uni.makePhoneCall({
		phoneNumber
	});
};

//重置
const resetVerify = () => {
	verifyRef.value!.initialization();
};

// 滑块验证改变
const changeVerify = (e: { [key: string]: [key: string] }) => {
	console.log("滑块", e);
	if (e.state) {
		// orderArrive(state.query.id)
		// 	.then((res) => {
		// 		if (res.data.code !== 200) throw res.data;
		// 		dataSource.arriveTime =formatTimestamp(res.data.timestamp);
		// 		dataSource.status='2';
		// 		navToServicePlan()
		// 		// state.showPlanModal=true;
		// 		// refresh();
		// 	})
		// 	.catch((err) => {
		// 		console.error('上报失败', err);
		// 		uni.showToast({
		// 			title: '操作失败',
		// 			icon: 'none'
		// 		});
		// 	});
	}
};
</script>

<style lang="scss" scoped>
view {
	box-sizing: border-box;
}
image {
	width: 100%;
	height: 100%;
}
.main {
	width: 100vw;
	min-height: 100vh;
	font-size: 28rpx;
	background-color: #f7f7f7;
	padding-bottom: calc(24rpx + env(safe-area-inset-bottom) / 2);
	padding-bottom: calc(152rpx + env(safe-area-inset-bottom) / 2);
}
.hide_footer_main {
	padding-bottom: calc(24rpx + env(safe-area-inset-bottom) / 2) !important;
}
.main.main_p {
	padding-bottom: calc(152rpx + 130rpx + env(safe-area-inset-bottom) / 2);
}
.main.main_p.main_hide_footer_button {
	padding-bottom: calc(152rpx - 92rpx + 70rpx + env(safe-area-inset-bottom) / 2);
	.footer {
		.card {
			padding-bottom: 0;
			margin-bottom: 0;
			border-bottom: none;
		}
	}
}
.status {
	padding: 2rpx 8rpx;
	border-radius: 4rpx;
	font-size: 24rpx;
}
.qrcode {
	background-color: #fff;
	padding: 48rpx 0 24rpx 0;
	color: #444444;
	font-size: 24rpx;
	flex-direction: column;
	.img {
		width: 272rpx;
		height: 272rpx;
		padding: 16rpx;
		border-radius: 16rpx;
		border: 1.5px solid #e4e5e6;
		margin-bottom: 24rpx;
		position: relative;

		.view_icon {
			position: absolute;
			bottom: -1px;
			right: -1px;
			width: 46rpx;
			height: 46rpx;
			border-radius: 16rpx 0 16rpx 0;
			background: rgba(0, 0, 0, 0.5);
			z-index: 2;
			image {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}
}
.header {
	color: #333333;
	font-size: 28rpx;
	padding-bottom: 24rpx;
	background-color: #fff;
	padding: 30rpx 38rpx;
	.times {
		width: calc(100% - 32rpx);
		.label {
			font-weight: bold;
			padding-right: 16rpx;
		}
		.end_time {
			padding-bottom: 24rpx;
		}
	}
	.steps {
		margin-right: 16rpx;
		flex-direction: column;
		:nth-child(1) {
			background-color: #0ec880;
		}
		:nth-child(3) {
			background-color: #fb5c03;
		}
		.steps_icon {
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
		}
		.steps_line {
			width: 1px;
			height: 34rpx;
			margin: 6rpx 0;
			background-color: #e1e2e3;
		}
	}
}

.card_pt {
	padding-top: 24rpx;
}
.card_a {
	padding-top: 24rpx;
	padding-bottom: 24rpx;
}
.card_b {
	padding-top: 30rpx;
	padding-bottom: 30rpx;
}
.font_bold {
	font-weight: bold;
}
.card {
	padding-left: 30rpx;
	padding-right: 30rpx;
	margin-bottom: 24rpx;
	margin-top: 24rpx;
	color: #333;
	font-size: 28rpx;
	background-color: #fff;
	.card_title {
		font-size: 30rpx;
		font-weight: bold;
		color: #404040;
		padding-bottom: 24rpx;
		border-bottom: 1px solid #f5f5f5;
	}
	.card_desc {
		padding-top: 24rpx;
		margin: 0 30rpx;
		line-height: 42rpx;
		word-break: break-all;
	}

	.card_form {
		padding: 0 32rpx 32rpx 32rpx;
		.row_label {
			text-align: left;
		}
	}
}
.form_row {
	color: #333;
	padding-top: 30rpx;
	align-items: flex-start;
}

.row_label {
	color: #888888;
	width: 160rpx;
	// text-align: right;
}

.row_value_img {
	width: 76rpx;
	height: 76rpx;
	border-radius: 8rpx;
	padding-left: 0;
	overflow: hidden;
	display: inline-block;
	margin-right: 8rpx;
	position: relative;
	.play_icon {
		width: 34rpx;
		height: 34rpx;
		position: absolute;
		z-index: 2;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	video {
		width: 100%;
		height: 100%;
	}
}

.row_value {
	color: #333333;
	text-align: right;
	width: calc(100% - 160rpx);
	padding-left: 46rpx;
	line-height: 42rpx;
	white-space: pre-wrap;
	box-sizing: border-box;
	word-break: break-all;
	:last-child.row_value_img {
		margin-right: 0 !important;
	}
}
.row_value.order_row_value {
	color: #888888;
	justify-content: flex-end;
	:nth-child(2) {
		width: 1px;
		height: 24rpx;
		background-color: #bbbbbb;
		margin: 0 24rpx;
	}
	:nth-child(3) {
		color: #486cf6;
	}
}
.row_icon {
	width: 30rpx;
	height: 30rpx;
	margin-left: 16rpx;
}

.verify {
	height: 92rpx;
	width: 100%;
}

.footer {
	width: 100%;
	background-color: #fff;
	padding: 24rpx 0 calc(52rpx + env(safe-area-inset-bottom) / 2) 0;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	z-index: 8;
	font-size: 28rpx;
	box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.05);

	.padding_r {
		padding-right: 46rpx;
	}
	.padding_l {
		padding-left: 46rpx;
	}
	.btns {
		font-size: 30rpx;
		width: 100%;
		.btn {
			height: 92rpx;
			border-radius: 16rpx;
			border: 1px solid #486cf6;
			color: #486cf6;
			font-weight: bold;
		}
		.receive_payment {
			width: 220rpx;
			margin-right: 24rpx;
		}
		.btn.submit {
			background-color: #486cf6;
			color: #fff;
			flex: 1;
			width: 100%;
		}
	}
	.card {
		margin: 0 0 30rpx 0;
		padding-bottom: 24rpx;
		border-bottom: 1px solid #f5f5f5;
		.sf_l {
			.tl_avatar {
				width: 50rpx;
				height: 50rpx;
				margin-right: 24rpx;
			}
			.tl_info_tit {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}
		}
		.sfr_item {
			flex-direction: row;
			background: rgba(64, 104, 225, 0.07);
			border-radius: 58rpx;
			color: #486cf6;
			height: 62rpx;
			padding: 0 24rpx;
			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 12rpx;
				margin-bottom: 0;
			}
		}
	}
}

.tabs {
	border-bottom: 1px solid #f5f5f5;
}
.card_content {
	padding: 38rpx 30rpx 30rpx 30rpx;
	.order_desc {
		width: 100%;
		padding: 32rpx;
		border-radius: 8rpx;
		background-color: #f7f8f9;
	}
}
</style>
